import type { DataTableColumns, DropdownOption } from 'naive-ui'
import type { CreateColumsOptions } from '@/types/fcform'
import { NDropdown, NAvatar, NButton, NSwitch } from 'naive-ui'
import { cloneDeep } from 'lodash-es'
import roleUserApi from '@/service/api/setting/roleUser.ts'

export const createColums = (options: CreateColumsOptions): DataTableColumns => {
  const { action, handDel } = options
  return [
    {
      type: 'selection',
      options: ['all', 'none'],
      disabled(row) {
        return row.username === 'admin'
      },
    },
    {
      title: '序号',
      key: 'key',
      width: 70,
      render: (_, index) => {
        return `${index + 1}`
      },
    },
    {
      title: '头像',
      width: 80,
      key: 'total',
      align: 'center',
      render(row) {
        return h(NAvatar, {
          src: row.avatar,
          size: 'medium',
          round: true,
        })
      },
    },
    {
      title: '用户名',
      key: 'username',
    },
    {
      title: '昵称',
      key: 'nickname',
    },
    {
      title: '真实姓名',
      key: 'name',
    },
    {
      title: '手机号',
      key: 'phone',
    },
    {
      title: '岗位',
      key: 'postNames',
    },
    {
      title: '角色',
      key: 'roleNames',
    },
    {
      title: '启用',
      key: 'lockFlag',
      width: 100,
      align: 'center',
      render(row) {
        return h(NSwitch, {
          value: row.lockFlag,
          loading: row.loading,
          rubberBand: false,
          checkedValue: '1',
          uncheckedValue: '0',
          ['on-update:value']: (checked: string) => {
            row.loading = true
            const itRow = cloneDeep(row)
            itRow.role = cloneDeep(itRow.roleList).map((el) => {
              return el.roleId
            })
            itRow.post = cloneDeep(itRow.postList).map((el) => {
              return el.postId
            })
            roleUserApi
              .edit({
                ...itRow,
                lockFlag: checked,
              })
              .then(({ code }) => {
                if (code === 0) {
                  row.lockFlag = checked
                }
                row.loading = false
              })
          },
        })
      },
    },
    {
      title: '操作',
      key: 'total',
      align: 'center',
      width: 120,
      render(row) {
        const arr = []
        const editBtn = h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: async () => {
              const { data } = await roleUserApi.detail(row.userId)
              data.role = cloneDeep(data.roleList).map((el) => {
                return String(el.roleId)
              })
              data.post = cloneDeep(data.postList).map((el) => {
                return el.postId
              })
              delete data.password
              action.default(data)
            },
          },
          { default: () => '编辑' },
        )
        const moreBtnOptions: DropdownOption[] = []
        if (commonUnit.auth('sys_user_edit')) {
          moreBtnOptions.push({
            label: '密码',
            key: 'pass',
          })
        }
        if (commonUnit.auth('sys_user_del')) {
          moreBtnOptions.push({
            label: () =>
              h(
                'div',
                {
                  style: {
                    color: 'red',
                  },
                },
                '删除',
              ),
            key: 'del',
            disabled: row.username === 'admin',
          })
        }
        const moreBtn = h(
          NDropdown,
          {
            trigger: 'hover',
            options: moreBtnOptions,
            onSelect: (e: string) => {
              switch (e) {
                case 'pass':
                  action.pass(row)
                  break
                case 'del':
                  handDel(row)
                  break
              }
            },
          },
          {
            default: () =>
              h(
                NButton,
                {
                  size: 'small',
                  quaternary: true,
                },
                { default: () => '更多' },
              ),
          },
        )

        if (commonUnit.auth('sys_user_edit')) {
          arr.push(editBtn)
        }
        if (moreBtnOptions.length > 0) {
          arr.push(moreBtn)
        }
        return h('div', arr)
      },
    },
  ]
}
